<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            outline: none;
        }

        .publish {
            width: 500px;
            margin: 20px auto;
        }

        textarea {
            width: 500px;
            height: 300px;
            padding: 20px;
            font-size: 20px;
            resize: none;
            box-sizing: border-box;
        }

        .submit-1 {
            margin: 20px 0;
            overflow: hidden;
        }

        .submit-1 p {
            float: left;
        }

        .submit-1 button {
            float: right;
            width: 80px;
            height: 30px;
            background-color: #fff;
        }

        .container {
            display: none;
            overflow: hidden;
            width: 500px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;

        }

        .container-copy {
            display: block;
            overflow: hidden;
            width: 500px;
            border: 1px solid #000;
            box-sizing: border-box;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;

        }

        .container .comment span {
            float: left;
            width: 300px;
            height: 50px;
            background-color: burlywood;
        }

        .container .btnCollection {
            float: right;

        }

        .container .btnDel,
        .btnEdit {
            width: 50px;
            height: 30px;
            margin: 10px;
            background-color: #fff;
            border: 1px solid #999;
        }

        .container .margin-right-10 {
            margin-right: 10px;
        }


        .comment span {
            float: left;
            width: 300px;
            height: 50px;
            background-color: burlywood;
        }

        .btnCollection {
            float: right;
        }

        .btnDel,
        .btnEdit {
            width: 50px;
            height: 30px;
            margin: 10px;
            background-color: #fff;
            border: 1px solid #999;
        }

        .margin-right-10 {
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="publish">
        <div class="form">
            <textarea name="" id="" cols="30" rows="10" maxlength="30"></textarea>
            <div class="submit-1">
                <p>还可以输入<strong>30</strong>个字</p>
                <button class="btnSubmit">发布</button>
            </div>
        </div>
        <div class="space"></div>
        <div class="container">
            <div class="comment">
                <span class="text"></span>
                <p class="btnCollection">
                    <input type="button" value="删除" class="btnDel margin-right-10">
                    <input type="button" value="修改" class="btnEdit">
                </p>
            </div>

        </div>
    </div>
    <script>
        // 点击发布
        // 外面大盒子
        var publish = document.querySelector('.publish');
        // 提交按钮
        var btnSubmit = document.querySelector(".btnSubmit");
        // 文本框输入
        var text = document.querySelector("textarea");
        // 还可输入的字数
        var maxWorld = document.querySelector('.submit-1 p strong')
        // 在评论区出现的内容
        var commentContent = document.querySelectorAll('.publish .container .comment .text')
        // 复制的评论区区域

        // 原本的评论区区域
        var container = document.querySelector('.container');
        // 暂时无用
        var space = document.querySelector('.space')
        // 删除按钮

        // console.log(btnDel);
        text.maxLength = 30;
        if (text.maxLength - text.value.length < 0) {
            maxWorld.innerHTML = 0
        } else {
            (maxWorld.innerHTML = (text.maxLength - text.value.length));
        }
        text.oninput = function () {

            text.value.trim();
            maxWorld.innerHTML = text.maxLength - text.value.length;
        }
        var ssss = [];
        btnSubmit.onclick = function () {
            console.log(text.value);
            if (text.value == "" || text.value.trim() == "") {
                alert("请输入内容");
            } else {
                // 给下面的评论区赋值
                commentContent[0].innerHTML = text.value;
                var containerCopy = publish.insertBefore(container.cloneNode(1), containerCopy)
                //  var containerCopy = publish.appendChild(container.cloneNode(1));
                containerCopy.className = 'container-copy';
                text.value = '';
          
                    maxWorld.innerHTML = (text.maxLength - text.value.length);
          
            }
            // 删除
            var ssss = document.querySelectorAll('.container-copy');
            console.log(ssss);
            var btnDel = document.querySelectorAll('.btnDel');

            for (var i = 0; i < btnDel.length; i++) {


                btnDel[i].count = i - 1
                btnDel[i].onclick = function () {
                    console.log();
                    ssss[this.count].style.display = 'none'
                }

            }
            // 修改

            var btnEdit = document.querySelectorAll('.btnEdit')
            console.log(btnEdit);
            for (var i = 0; i < btnEdit.length; i++) {
                btnEdit[i].cont = i - 1;
                btnEdit[i].onclick = function () {

                    // 怎么获取span里面的内容
                    console.log(commentContent.outerText.value);
                    text.value = containerCopy[i]
                    // console.log(ssss[this.cont]);
                }
            }

        }

    </script>
</body>

</html>